/* 通用 */
*{
    padding: 0px;
    margin: 0px;
    list-style: none;
    box-sizing: border-box;
}
/* 通栏 */
.container-fulid{
   width: 100%;
  
}
.container{
    width: 1200px;
    margin: 0 auto;
}


a{
    text-decoration: none;
    color: black;
}

body{
    height: 1000px;
}
/* ------------------------------------------------------ */
/* 右边栏开始 */
#youbianLan{
    width: 36px;
    height: 900px;
    background-color: black;
    position: fixed;
    z-index: 8;
    right: 0;
    text-align: center;
    color: #fff;
}
#youbianLan .zhanghao{
    width: 36px;
    height: 55.6px;
    position: absolute;
    z-index: 10;
    top: 40px;
}
#youbianLan .shopbag{
    width: 36px;
    height: 149.8px;
    position: absolute;
    z-index: 10px;
    top:100px;
    text-align: center;
}
#youbianLan .shopbag i{
    /* line-height: 149.8px; */
    text-align: center;
}
#youbianLan .tubiao{
    position: absolute;
    width: 36px;
    height: 36px;
    font-size: 25px;
}
#youbianLan .icon-youhuiquan{
    top: 260px;
}
#youbianLan .icon-wodeshoucang{
    top: 300px;
}
#youbianLan .icon-ego-favorite{
    top: 340px;
}
#youbianLan .icon-wodezuji{
    top: 380px;
}
#youbianLan .icon-shouji{
    top: 420px;
}
#youbianLan .icon-bianji{
    bottom: 70px;
}
#youbianLan .icon-xiangshangjiantou{
    bottom: 20px;
}
.zhanghao:hover,.shopbag:hover, .icon-youhuiquan:hover,.icon-wodeshoucang:hover,.icon-ego-favorite:hover, .icon-wodezuji:hover,.icon-shouji:hover{
    background-color: #df147f;
}

/* ------------------------------------------------------ */
/* 头部开始 */
.head{
    height: 40px;
    background:#f5f5f5 ;
}
.header{
    height: 40px;
    line-height: 40px;
    /* background: red; */
    display: flex;
    justify-content: space-between;
}
.header .left{
    text-align: center;
    position: relative;
}
.header .left span{
    font-size: 14px;
}
.header .left:hover{
    
}

.header .right{
    color: gray;
    display: flex;
    justify-content: space-evenly;
    
}
.header .right>li{
    width: 80px;
    text-align: center;
    position: relative;
    

    
    /* transition: 1s linear; */
   
}
.header .right>li a{
    font-size: 12px;
    color: gray;
}
.header .right>li i{
    margin: 10px 10px ;
}
.header .right>li a:hover{
    color: hotpink;
}


.header .right>li a:hover .right .triangle{
transform: rotateX(180deg);
transform: rotateY(180deg);
}
/*顶部二级菜单 */
.header .right>li:hover .sec{
    display: block;
}
.first-li .sec{
    width: 250px;
    height: 170px;
    border: 1px solid gainsboro;
    position: absolute;
    top: 40px;
    left: 0px;
    font-size: 12px;
    display: none;
    background-color: white;
    z-index: 999;
    
}
.sec-li li{
width: 100px;
float: left;
font-size: 12px;
}
.sec p:hover {
    color: hotpink;
}
.sec-li li:hover {
    color: hotpink;
}
/* --------------------------------------- */
.third-li3:hover .sec-li3{
    display: block;
}
.sec-li3{
    width: 400px;
    height: 300px;
    border: 1px solid gainsboro;
    background-color: white;
    z-index: 999;
    display: none;
}
.sec-li3 span{
    color: hotpink;
    font: 800;
}
u{
    list-style: none;
}
.sec-li3 u{
    font-size: 14px;
}
.sec-li3 img{
    width: 250px;
    height: 150px;
}
/* ----------------------------------------------- */


.two-code{
    width: 150px;
    height: 150px;
    text-align: center;
    z-index:999;
    border: 1px solid gray;
    font-size: 14px;
    display: none;
    background-color: white;
   
   
}
.two-code img{
    width: 100px;
    height: 100px;
    margin-top: 15px;
}
.eight-li8:hover .two-code{
    display: block;

}

/* 小三角 */
 .left .triangle{
    position: absolute;
    top: 17px;
    right: -25px;
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 4px;
    border-color: #999 transparent transparent transparent;
    border-style: solid dashed dotted dashed;
    vertical-align: top;
}

.right .triangle{
    position: absolute;
    top: 17px;
    right: -10px;
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 4px;
    border-color: #999 transparent transparent transparent;
    border-style: solid dashed dotted dashed;
    vertical-align: top;
}


.right>li:hover .triangle{
    border-color:transparent transparent hotpink transparent;
    
}
/* 小三角结束 */




/* logo 图标开始 */
.logo{
    height: 120px;
    display: flex;
    justify-content: space-between;
   
}
.logo .left{
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

}
.logo .left .lg1 img{
    width: 150px;
    height: 70px;
}

.logo .left .lg2 img{
    width: 350px;
    height: 110px;
    
}
.logo .right {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;

}
.logo .right .txt{
    width: 360px;
    height: 40px;
    border: 2px solid hotpink;
 
}
.logo .right .sub{
    margin-left: -130px;
    height: 40px;
    width: 60px;
    border: 2px solid hotpink;
    background: hotpink;
}
/* 搜索下拉框 */
.right .sub-down{
    width: 360px;
    height: 400px;
    border: 1px solid black;

}
/* 搜索下拉框结束 */
.logo .right .tool{
    height: 40px;
    line-height: 40px;
    width: 120px;
    margin-left: 45px;
    border: 1px solid #cccccc;
    text-align: center;
    position: relative;
    

} 
.tool .count{
    width: 20px;
    height: 10px;
    border-radius: 5px;
    background-color: hotpink;
}
.tool .bag{
    width: 300px;
    height: 100px;
    line-height: 100px;
    border: 1px solid gray;
    position: absolute;
    top: 40px;
    left: -181px;
    background-color: white;
    
    text-align: center;
    display: none;

}
.tool:hover .bag{
    display: block;

}

.logo .right .right-ul{
    width: 360px;
    height: 20px;
    margin-top: -15px;
}
.logo .right .right-ul ul{
    display: flex;
    justify-content: space-between;
    
}
.logo .right .right-ul ul li{
    width: 300px;
    border-left: 2px solid rgb(192, 191, 191);
    text-align: center;
    font-size: 12px;
    color: hotpink;
   
}
/* 选择第一个去左边框选不中 */
.right-ul ul li:nth-child(1){
    border-left: none;
    /* background-color: hotpink; */
   
   
}
/* 固定开始------------------------------------------ */

/* ========================================================== */
*{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
a{
    text-decoration: none;
    color: white;
}
/* -------------------------------- */
/* 固定开始 */
.fixed{
    height: 30px;
    line-height: 30px;
    /* 粘性定位 */
    /* position: sticky; */
    /* position: static; */

 }
 .fixed-m{
     display: flex;
    justify-content: flex-start;
    align-items: center;
    /* background-color: lavender; */
    text-align: center;
     
 
 }
  
 .fixed-m>li{
     width: 75px;
    
 }
 .fixed-m-more >.f-more-div{
    width: 75px;
    border: 1px solid gray;
    position: relative;
    display: none;
}
 .fixed-m li:hover{
     color: hotpink;
 }
 .fixed .fixed-m>li:nth-child(1){
     background-color: #f10180;
     color: white;
 }.fixed .fixed-m>li:nth-child(2){
     font-weight: 600;
     color: #f10180;
 }
 




/* -----------------二级下拉---------------- */
.nav{
    position: relative;
    height: 500px;
    display: none;
    z-index: 999;
}
.nav>li{
    width: 270px;
    /* height: 40px; */
    line-height: 45px;
    background-color: #f10180;
  position: relative;
  /* z-index: 999; */
    text-align: center;
}

.nav >li:hover{
    background-color:white;
  
}
.nav >li:hover a{
    color: hotpink;
}
/* .nav >li:hover .box{
    display: block;
} */
/* -----------------三级下拉------------------ */
.third-box{
    width: 900px;
    height:450px;
    background-color: whitesmoke;
    position: absolute;
    top: 190px;
    /* left: 428px; */
    left: 680px;

    font-size: 20px;
    display: none;
    z-index: 999;
}

/* ======================================================== */
